---
title: "Install Tailwind CSS with Next.js"
description: "Setting up Tailwind CSS in a Next.js project."
tool: Next.js
---

```preval installation
reference:
  name: Create Next App
  link: https://nextjs.org/docs/api-reference/create-next-app
script: npx create-next-app -e with-tailwindcss
```

This will automatically configure your Tailwind setup based on the official Next.js example. If you'd like to configure Tailwind manually, continue with the rest of this guide.

---

```preval setup
version:
  Next.js v10 or newer: latest
  Next.js v9 or older: compat-7
```

```preval configuration
purge: 
  - ./pages/**/*.{js,ts,jsx,tsx}
  - ./components/**/*.{js,ts,jsx,tsx}
```

### Include Tailwind in your CSS

When including Tailwind in your CSS in a Next.js project, there are two approaches you can take.

#### Import Tailwind directly in your JS

If you aren't planning to write any custom CSS in your project, the fastest way to include Tailwind is to import it directly in `pages/_app.js`:

```diff-js
  // pages/_app.js
- import '../styles/globals.css'
+ import 'tailwindcss/tailwind.css'

  function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
  }

  export default MyApp
```

If you aren't planning to use them, you can safely delete any CSS files Next.js creates for you by default like `globals.css` and `Home.module.css`. Make sure you delete any references to them within your components as well.

```preval include
level: 4
file: ./styles/globals.css 
```

Finally, ensure your CSS file is being imported in your `pages/_app.js` component:

```js
// pages/_app.js
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp
```

If you've chosen to use a different file than the default `globals.css` file, you'll want to update the import accordingly.

---

```preval finish
scripts:
  - npm run dev
```

